<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Material Admin - Tabs</title>

		<!-- BEGIN META -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="keywords" content="your,keywords">
		<meta name="description" content="Short explanation about this website">
		<!-- END META -->

		<!-- BEGIN STYLESHEETS -->
		<link href='http://fonts.useso.com/css?family=Roboto:300italic,400italic,300,400,500,700,900' rel='stylesheet' type='text/css'/>
		<link type="text/css" rel="stylesheet" href="../../assets/css/theme-default/bootstrap.css?1422792965" />
		<link type="text/css" rel="stylesheet" href="../../assets/css/theme-default/materialadmin.css?1425466319" />
		<link type="text/css" rel="stylesheet" href="../../assets/css/theme-default/font-awesome.min.css?1422529194" />
		<link type="text/css" rel="stylesheet" href="../../assets/css/theme-default/material-design-iconic-font.min.css?1421434286" />
		<!-- END STYLESHEETS -->

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
		<script type="text/javascript" src="../../assets/js/libs/utils/html5shiv.js?1403934957"></script>
		<script type="text/javascript" src="../../assets/js/libs/utils/respond.min.js?1403934956"></script>
		<![endif]-->
	</head>
	<body class="menubar-hoverable header-fixed menubar-pin ">

		<!-- BEGIN HEADER-->
		<header id="header" >
			<div class="headerbar">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="headerbar-left">
					<ul class="header-nav header-nav-options">
						<li class="header-nav-brand" >
							<div class="brand-holder">
								<a href="../../html/dashboards/dashboard.html">
									<span class="text-lg text-bold text-primary">MATERIAL ADMIN</span>
								</a>
							</div>
						</li>
						<li>
							<a class="btn btn-icon-toggle menubar-toggle" data-toggle="menubar" href="javascript:void(0);">
								<i class="fa fa-bars"></i>
							</a>
						</li>
					</ul>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="headerbar-right">
					<ul class="header-nav header-nav-options">
						<li>
							<!-- Search form -->
							<form class="navbar-search" role="search">
								<div class="form-group">
									<input type="text" class="form-control" name="headerSearch" placeholder="Enter your keyword">
								</div>
								<button type="submit" class="btn btn-icon-toggle ink-reaction"><i class="fa fa-search"></i></button>
							</form>
						</li>
						<li class="dropdown hidden-xs">
							<a href="javascript:void(0);" class="btn btn-icon-toggle btn-default" data-toggle="dropdown">
								<i class="fa fa-bell"></i><sup class="badge style-danger">4</sup>
							</a>
							<ul class="dropdown-menu animation-expand">
								<li class="dropdown-header">Today's messages</li>
								<li>
									<a class="alert alert-callout alert-warning" href="javascript:void(0);">
										<img class="pull-right img-circle dropdown-avatar" src="../../assets/img/avatar2.jpg?1404026449" alt="" />
										<strong>Alex Anistor</strong><br/>
										<small>Testing functionality...</small>
									</a>
								</li>
								<li>
									<a class="alert alert-callout alert-info" href="javascript:void(0);">
										<img class="pull-right img-circle dropdown-avatar" src="../../assets/img/avatar3.jpg?1404026799" alt="" />
										<strong>Alicia Adell</strong><br/>
										<small>Reviewing last changes...</small>
									</a>
								</li>
								<li class="dropdown-header">Options</li>
								<li><a href="../../html/pages/login.html">View all messages <span class="pull-right"><i class="fa fa-arrow-right"></i></span></a></li>
								<li><a href="../../html/pages/login.html">Mark as read <span class="pull-right"><i class="fa fa-arrow-right"></i></span></a></li>
							</ul><!--end .dropdown-menu -->
						</li><!--end .dropdown -->
						<li class="dropdown hidden-xs">
							<a href="javascript:void(0);" class="btn btn-icon-toggle btn-default" data-toggle="dropdown">
								<i class="fa fa-area-chart"></i>
							</a>
							<ul class="dropdown-menu animation-expand">
								<li class="dropdown-header">Server load</li>
								<li class="dropdown-progress">
									<a href="javascript:void(0);">
										<div class="dropdown-label">
											<span class="text-light">Server load <strong>Today</strong></span>
											<strong class="pull-right">93%</strong>
										</div>
										<div class="progress"><div class="progress-bar progress-bar-danger" style="width: 93%"></div></div>
									</a>
								</li><!--end .dropdown-progress -->
								<li class="dropdown-progress">
									<a href="javascript:void(0);">
										<div class="dropdown-label">
											<span class="text-light">Server load <strong>Yesterday</strong></span>
											<strong class="pull-right">30%</strong>
										</div>
										<div class="progress"><div class="progress-bar progress-bar-success" style="width: 30%"></div></div>
									</a>
								</li><!--end .dropdown-progress -->
								<li class="dropdown-progress">
									<a href="javascript:void(0);">
										<div class="dropdown-label">
											<span class="text-light">Server load <strong>Lastweek</strong></span>
											<strong class="pull-right">74%</strong>
										</div>
										<div class="progress"><div class="progress-bar progress-bar-warning" style="width: 74%"></div></div>
									</a>
								</li><!--end .dropdown-progress -->
							</ul><!--end .dropdown-menu -->
						</li><!--end .dropdown -->
					</ul><!--end .header-nav-options -->
					<ul class="header-nav header-nav-profile">
						<li class="dropdown">
							<a href="javascript:void(0);" class="dropdown-toggle ink-reaction" data-toggle="dropdown">
								<img src="../../assets/img/avatar1.jpg?1403934956" alt="" />
								<span class="profile-info">
									Daniel Johnson
									<small>Administrator</small>
								</span>
							</a>
							<ul class="dropdown-menu animation-dock">
								<li class="dropdown-header">Config</li>
								<li><a href="../../html/pages/profile.html">My profile</a></li>
								<li><a href="../../html/pages/blog/post.html">My blog <span class="badge style-danger pull-right">16</span></a></li>
								<li><a href="../../html/pages/calendar.html">My appointments</a></li>
								<li class="divider"></li>
								<li><a href="../../html/pages/locked.html"><i class="fa fa-fw fa-lock"></i> Lock</a></li>
								<li><a href="../../html/pages/login.html"><i class="fa fa-fw fa-power-off text-danger"></i> Logout</a></li>
							</ul><!--end .dropdown-menu -->
						</li><!--end .dropdown -->
					</ul><!--end .header-nav-profile -->
					<ul class="header-nav header-nav-toggle">
						<li>
							<a class="btn btn-icon-toggle btn-default" href="#offcanvas-search" data-toggle="offcanvas" data-backdrop="false">
								<i class="fa fa-ellipsis-v"></i>
							</a>
						</li>
					</ul><!--end .header-nav-toggle -->
				</div><!--end #header-navbar-collapse -->
			</div>
		</header>
		<!-- END HEADER-->

		<!-- BEGIN BASE-->
		<div id="base">

			<!-- BEGIN OFFCANVAS LEFT -->
			<div class="offcanvas">
			</div><!--end .offcanvas-->
			<!-- END OFFCANVAS LEFT -->

			<!-- BEGIN CONTENT-->
			<div id="content">
				<section>
					<div class="section-header">
						<ol class="breadcrumb">
							<li class="active">Tabs</li>
						</ol>
					</div>
					<div class="section-body contain-lg">

						<!-- BEGIN INTRO -->
						<div class="row">
							<div class="col-lg-12">
								<h1 class="text-primary">Tabs</h1>
							</div><!--end .col -->
							<div class="col-lg-8">
								<article class="margin-bottom-xxl">
									<p class="lead">
										Tabs make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets.
									</p>
								</article>
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END INTRO -->

						<!-- BEGIN LAYOUT - ALIGNMENT  -->
						<div class="row">
							<div class="col-lg-12">
								<h2 class="text-primary">Layout</h2>
							</div><!--end .col -->
							<div class="col-lg-12">
								<h4>Alignment</h4>
							</div><!--end .col -->
							<div class="col-md-8">
								<article class="margin-bottom-xxl">
									<p>
										You can align the tabs to the left, right, centered and justified.
										By default the tabs are left aligned in the header.
									</p>
								</article>
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END LAYOUT - ALIGNMENT -->

						<div class="row">

							<!-- BEGIN LAYOUT LEFT ALIGNED -->
							<div class="col-md-6">
								<div class="card">
									<div class="card-head">
										<ul class="nav nav-tabs" data-toggle="tabs">
											<li class="active"><a href="#first1">FIRST TAB</a></li>
											<li><a href="#second1">NO. TWO</a></li>
											<li><a href="#third1">THE THIRD</a></li>
										</ul>
									</div><!--end .card-head -->
									<div class="card-body tab-content">
										<div class="tab-pane active" id="first1"><p>Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.</p>
										</div>
										<div class="tab-pane" id="second1"><p>Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.</p>
										</div>
										<div class="tab-pane" id="third1"><p>Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.</p>
											<p>Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo</p>
										</div>
									</div><!--end .card-body -->
								</div><!--end .card -->
								<em class="text-caption">Left aligned tabs</em>
							</div><!--end .col -->
							<!-- END LAYOUT LEFT ALIGNED -->

							<!-- BEGIN LAYOUT RIGHT ALIGNED -->
							<div class="col-md-6">
								<div class="card card-underline">
									<div class="card-head">
										<ul class="nav nav-tabs pull-right" data-toggle="tabs">
											<li class="active"><a href="#first2">FIRST TAB</a></li>
											<li><a href="#second2">NO. TWO</a></li>
											<li><a href="#third2">THE THIRD</a></li>
										</ul>
										<header>Title</header>
									</div>
									<div class="card-body tab-content">
										<div class="tab-pane active" id="first2"><p>Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.</p>
										</div>
										<div class="tab-pane" id="second2"><p>Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.</p>
										</div>
										<div class="tab-pane" id="third2"><p>Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.</p>
											<p>Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo</p>
										</div>
									</div>
								</div><!--end .card -->
								<em class="text-caption">Right aligned tabs</em>
							</div><!--end .col -->
							<!-- END LAYOUT RIGHT ALIGNED -->

						</div><!--end .row -->
						<div class="row">

							<!-- BEGIN LAYOUT CENTERED -->
							<div class="col-md-6">
								<div class="card">
									<div class="card-head">
										<ul class="nav nav-tabs tabs-center" data-toggle="tabs">
											<li class="active"><a href="#first3">FIRST TAB</a></li>
											<li><a href="#second3">NO. TWO</a></li>
											<li><a href="#third3">THE THIRD</a></li>
										</ul>
									</div><!--end .card-head -->
									<div class="card-body tab-content">
										<div class="tab-pane active" id="first3"><p>Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.</p>
										</div>
										<div class="tab-pane" id="second3"><p>Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.</p>
										</div>
										<div class="tab-pane" id="third3"><p>Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.</p>
											<p>Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo</p>
										</div>
									</div><!--end .card-body -->
								</div><!--end .card -->
								<em class="text-caption">Centered tabs</em>
							</div><!--end .col -->
							<!-- END LAYOUT CENTERED -->

							<!-- BEGIN LAYOUT JUSTIFIED -->
							<div class="col-md-6">
								<div class="card">
									<div class="card-head">
										<ul class="nav nav-tabs nav-justified" data-toggle="tabs">
											<li class="active"><a href="#first4">FIRST TAB</a></li>
											<li><a href="#second4">NO. TWO</a></li>
											<li><a href="#third4">THE THIRD</a></li>
										</ul>
									</div><!--end .card-head -->
									<div class="card-body tab-content">
										<div class="tab-pane active" id="first4"><p>Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.</p>
										</div>
										<div class="tab-pane" id="second4"><p>Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.</p>
										</div>
										<div class="tab-pane" id="third4"><p>Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.</p>
											<p>Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo</p>
										</div>
									</div><!--end .card-body -->
								</div><!--end .card -->
								<em class="text-caption">Justified tabs</em>
							</div><!--end .col -->
							<!-- END LAYOUT JUSTIFIED -->

						</div><!--end .row -->

						<!-- BEGIN LAYOUT - PLACEMENT  -->
						<div class="row">
							<div class="col-lg-12">
								<h4>Placement</h4>
							</div><!--end .col -->
							<div class="col-md-8">
								<article class="margin-bottom-xxl">
									<p>
										Tabs can not only be placed above the content, but also left, right and below the content.
									</p>
								</article>
							</div><!--end .col -->
						</div><!--end .row -->
						<!-- END LAYOUT - PLACEMENT -->

						<div class="row">

							<!-- BEGIN LAYOUT LEFT SIDEBAR -->
							<div class="col-md-6">
								<div class="card tabs-left style-default-light">
									<ul class="card-head nav nav-tabs" data-toggle="tabs">
										<li><a href="#first5">FIRST TAB</a></li>
										<li class="active"><a href="#second5">NO. TWO</a></li>
										<li><a href="#third5">THE THIRD</a></li>
									</ul>
									<div class="card-body tab-content style-default-bright">
										<div class="tab-pane" id="first5"><h3 class="text-light">Daniel <strong>Johnson</strong></h3>
											<p>Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.</p>
											<dl class="dl-horizontal">
												<dt>Description lists</dt>
												<dd>A description list is perfect for defining terms.</dd>
												<dt>Euismod</dt>
												<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
												<dd>Donec id elit non mi porta gravida.</dd>
												<dt>Malesuada porta</dt>
												<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
											</dl>
										</div>
										<div class="tab-pane active" id="second5">
											<h1><i class="fa fa-fw fa-clock-o text-accent"></i> History</h1>
											<p class="lead">Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.</p>
											<p>Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.</p>
										</div>
										<div class="tab-pane" id="third5"><p>Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.</p>
											<p>Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo</p>
										</div>
									</div><!--end .card-body -->
								</div><!--end .card -->
								<em class="text-caption">Left sidebar layout</em>
							</div><!--end .col -->
							<!-- END LAYOUT LEFT SIDEBAR -->

							<!-- BEGIN LAYOUT RIGHT SIDEBAR -->
							<div class="col-md-6">
								<div class="card tabs-right style-default-light">
									<ul class="card-head nav nav-tabs text-center" data-toggle="tabs">
										<li class="active"><a href="#first6"><i class="fa fa-lg fa-user"></i><br/><h4>Profile<br/><small>Personal details</small></h4></a></li>
										<li><a href="#second6"><i class="fa fa-lg fa-clock-o"></i><br/><h4>History<br/><small>About us</small></h4></a></li>
									</ul>
									<div class="card-body tab-content style-default-bright">
										<div class="tab-pane active" id="first6"><h3 class="text-light">Daniel <strong>Johnson</strong></h3>
											<p>Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.</p>
											<dl class="dl-horizontal">
												<dt>Description lists</dt>
												<dd>A description list is perfect for defining terms.</dd>
												<dt>Euismod</dt>
												<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
												<dd>Donec id elit non mi porta gravida.</dd>
												<dt>Malesuada porta</dt>
												<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
											</dl>
										</div>
										<div class="tab-pane" id="second6">
											<h1><i class="fa fa-clock-o text-accent"></i> History</h1>
											<p class="lead">Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.</p>
											<p>Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.</p>
										</div>
									</div>
								</div><!--end .card -->
								<em class="text-caption">Right sidebar layout</em>
							</div><!--end .col -->
							<!-- END LAYOUT RIGHT SIDEBAR -->

						</div><!--end .row -->
						<div class="row">

							<!-- BEGIN LAYOUT FOOTER -->
							<div class="col-md-6">
								<div class="card tabs-below">
									<div class="card-body tab-content">
										<div class="tab-pane active" id="first7"><p>Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.</p>
										</div>
										<div class="tab-pane" id="second7"><p>Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.</p>
										</div>
										<div class="tab-pane" id="third7"><p>Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.</p>
											<p>Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo</p>
										</div>
									</div>
									<ul class="card-head nav nav-tabs" data-toggle="tabs">
										<li class="active"><a href="#first7">FIRST TAB</a></li>
										<li><a href="#second7">NO. TWO</a></li>
										<li><a href="#third7">THE THIRD</a></li>
									</ul>
								</div><!--end .card -->
								<em class="text-caption">Footer layout</em>
							</div><!--end .col -->
							<!-- END LAYOUT FOOTER -->

							<!-- BEGIN INLINE TABS -->
							<div class="col-md-6">
								<div class="card">
									<div class="card-body">
										<ul class="nav nav-tabs" data-toggle="tabs">
											<li class="active"><a href="#first8">FIRST TAB</a></li>
											<li><a href="#second8">NO. TWO</a></li>
											<li><a href="#third8">THE THIRD</a></li>
										</ul>
										<br/>
										<div class="tab-content">
											<div class="tab-pane active" id="first8"><p>Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.</p>
											</div>
											<div class="tab-pane" id="second8"><p>Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.</p>
											</div>
											<div class="tab-pane" id="third8"><p>Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.</p>
												<p>Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo</p>
											</div>
										</div>
									</div><!--end .card-body -->
								</div><!--end .card -->
								<em class="text-caption">Inline tabs</em>
							</div><!--end .col -->
							<!-- END INLINE TABS -->

						</div><!--end .row -->
						<hr class="ruler-xxl">

							<!-- BEGIN COLORS -->
							<div class="row">
								<div class="col-lg-12">
									<h2 class="text-primary">Colors</h2>
								</div><!--end .col -->
								<div class="col-lg-8">
									<article class="margin-bottom-xxl">
										<p>
											Convey meaning through color with the emphasis classes.
										</p>
									</article>
								</div><!--end .col -->
							</div><!--end .row -->
							<div class="row">
								<div class="col-md-3 col-xs-6">
									<div class="card">
										<div class="card-body small-padding style-default-dark text-center">.tabs-default-dark</div>
									</div>
									<div class="card">
										<div class="card-body small-padding style-default text-center">.tabs-default</div>
									</div>
									<div class="card">
										<div class="card-body small-padding style-default-light text-center">.tabs-default-light</div>
									</div>
									<div class="card">
										<div class="card-body small-padding style-default-bright text-center">.tabs-default-bright</div>
									</div>
								</div><!--end .col -->
								<div class="col-md-3 col-xs-6">
									<div class="card">
										<div class="card-body small-padding style-primary-dark text-center">.tabs-primary-dark</div>
									</div>
									<div class="card">
										<div class="card-body small-padding style-primary text-center">.tabs-primary</div>
									</div>
									<div class="card">
										<div class="card-body small-padding style-primary-light text-center">.tabs-primary-light</div>
									</div>
									<div class="card">
										<div class="card-body small-padding style-primary-bright text-center">.tabs-primary-bright</div>
									</div>
								</div><!--end .col -->
								<div class="col-md-3 col-xs-6">
									<div class="card">
										<div class="card-body small-padding style-accent-dark text-center">.tabs-accent-dark</div>
									</div>
									<div class="card">
										<div class="card-body small-padding style-accent text-center">.tabs-accent</div>
									</div>
									<div class="card">
										<div class="card-body small-padding style-accent-light text-center">.tabs-accent-light</div>
									</div>
									<div class="card">
										<div class="card-body small-padding style-accent-bright text-center">.tabs-accent-bright</div>
									</div>
								</div><!--end .col -->
								<div class="col-md-3 col-xs-6">
									<div class="card">
										<div class="card-body small-padding style-danger text-center">.tabs-danger</div>
									</div>
									<div class="card">
										<div class="card-body small-padding style-warning text-center">.tabs-warning</div>
									</div>
									<div class="card">
										<div class="card-body small-padding style-success text-center">.tabs-success</div>
									</div>
									<div class="card">
										<div class="card-body small-padding style-info text-center">.tabs-info</div>
									</div>
								</div><!--end .col -->
							</div><!--end .row -->
							<!-- END COLORS -->

							<!-- BEGIN COLORS -->
							<div class="row">
								<div class="col-lg-5 col-md-6">
									<article class="margin-bottom-xxl">
										<p>
											By default the bar and the text of the tabs have the same color.
										</p>
									</article>
								</div><!--end .col -->
							</div><!--end .row -->
							<!-- END COLORS -->

							<div class="row">

								<!-- BEGIN TAB THEME 1 -->
								<div class="col-sm-4">
									<div class="card">
										<div class="card-head">
											<ul class="nav nav-tabs tabs-primary" data-toggle="tabs">
												<li class="active"><a href="#first9">FIRST TAB</a></li>
												<li><a href="#second9">NO. TWO</a></li>
											</ul>
										</div><!--end .card-head -->
										<div class="card-body tab-content">
										</div>
									</div><!--end .card -->
									<em class="text-caption">Primary variant</em>
								</div><!--end .col -->
								<!-- END TAB THEME 1 -->

								<!-- BEGIN TAB THEME 2 -->
								<div class="col-sm-4">
									<div class="card">
										<div class="card-head">
											<ul class="nav nav-tabs tabs-accent-dark" data-toggle="tabs">
												<li class="active"><a href="#first10">FIRST TAB</a></li>
												<li><a href="#second10">NO. TWO</a></li>
											</ul>
										</div><!--end .card-head -->
										<div class="card-body tab-content">
										</div>
									</div><!--end .card -->
									<em class="text-caption">Dark accent variant</em>
								</div><!--end .col -->
								<!-- END TAB THEME 2 -->

								<!-- BEGIN TAB THEME 3 -->
								<div class="col-sm-4">
									<div class="card">
										<div class="card-head">
											<ul class="nav nav-tabs tabs-success" data-toggle="tabs">
												<li class="active"><a href="#first11">FIRST TAB</a></li>
												<li><a href="#second11">NO. TWO</a></li>
											</ul>
										</div><!--end .card-head -->
										<div class="card-body tab-content">
										</div>
									</div><!--end .card -->
									<em class="text-caption">Success variant</em>
								</div><!--end .col -->
								<!-- END TAB THEME 3 -->

							</div><!--end .row -->

							<!-- BEGIN COLORS - INVERSE -->
							<div class="row">
								<div class="col-lg-12">
									<h4>Inversed</h4>
								</div><!--end .col -->
								<div class="col-lg-5 col-md-6">
									<article class="margin-bottom-xxl">
										<p>
											Tab colors can be inverted so that they are easily visible on dark backgrounds.
										</p>
									</article>
								</div><!--end .col -->
							</div><!--end .row -->
							<!-- END COLORS - INVERSE -->

							<div class="row">

								<!-- BEGIN TAB THEME 1 -->
								<div class="col-sm-4">
									<div class="card style-default-dark">
										<div class="card-head">
											<ul class="nav nav-tabs tabs-text-contrast tabs-primary-light" data-toggle="tabs">
												<li class="active"><a href="#first12">FIRST TAB</a></li>
												<li><a href="#second12">NO. TWO</a></li>
											</ul>
										</div><!--end .card-head -->
										<div class="card-body tab-content">
										</div>
									</div><!--end .card -->
									<em class="text-caption">Light primary variant</em>
								</div><!--end .col -->
								<!-- END TAB THEME 1 -->

								<!-- BEGIN TAB THEME 2 -->
								<div class="col-sm-4">
									<div class="card style-default-dark">
										<div class="card-head">
											<ul class="nav nav-tabs tabs-text-contrast tabs-accent-light" data-toggle="tabs">
												<li class="active"><a href="#first13">FIRST TAB</a></li>
												<li><a href="#second13">NO. TWO</a></li>
											</ul>
										</div><!--end .card-head -->
										<div class="card-body tab-content">
										</div>
									</div><!--end .card -->
									<em class="text-caption">Light accent variant</em>
								</div><!--end .col -->
								<!-- END TAB THEME 2 -->

								<!-- BEGIN TAB THEME 3 -->
								<div class="col-sm-4">
									<div class="card style-default-dark">
										<div class="card-head">
											<ul class="nav nav-tabs tabs-text-contrast tabs-warning" data-toggle="tabs">
												<li class="active"><a href="#first14">FIRST TAB</a></li>
												<li><a href="#second14">NO. TWO</a></li>
											</ul>
										</div><!--end .card-head -->
										<div class="card-body tab-content">
										</div>
									</div><!--end .card -->
									<em class="text-caption">Warning variant</em>
								</div><!--end .col -->
								<!-- END TAB THEME 3 -->

							</div><!--end .row -->
						</div><!--end .section-body -->
					</section>
				</div><!--end #content-->
				<!-- END CONTENT -->

				<!-- BEGIN MENUBAR-->
				<div id="menubar" class="menubar-inverse ">
					<div class="menubar-fixed-panel">
						<div>
							<a class="btn btn-icon-toggle btn-default menubar-toggle" data-toggle="menubar" href="javascript:void(0);">
								<i class="fa fa-bars"></i>
							</a>
						</div>
						<div class="expanded">
							<a href="../../html/dashboards/dashboard.html">
								<span class="text-lg text-bold text-primary ">MATERIAL&nbsp;ADMIN</span>
							</a>
						</div>
					</div>
					<div class="menubar-scroll-panel">

						<!-- BEGIN MAIN MENU -->
						<ul id="main-menu" class="gui-controls">

							<!-- BEGIN DASHBOARD -->
							<li>
								<a href="../../html/dashboards/dashboard.html" >
									<div class="gui-icon"><i class="md md-home"></i></div>
									<span class="title">Dashboard</span>
								</a>
							</li><!--end /menu-li -->
							<!-- END DASHBOARD -->

							<!-- BEGIN EMAIL -->
							<li class="gui-folder">
								<a>
									<div class="gui-icon"><i class="md md-email"></i></div>
									<span class="title">Email</span>
								</a>
								<!--start submenu -->
								<ul>
									<li><a href="../../html/mail/inbox.html" ><span class="title">Inbox</span></a></li>
									<li><a href="../../html/mail/compose.html" ><span class="title">Compose</span></a></li>
									<li><a href="../../html/mail/reply.html" ><span class="title">Reply</span></a></li>
									<li><a href="../../html/mail/message.html" ><span class="title">View message</span></a></li>
								</ul><!--end /submenu -->
							</li><!--end /menu-li -->
							<!-- END EMAIL -->

							<!-- BEGIN DASHBOARD -->
							<li>
								<a href="../../html/layouts/builder.html" >
									<div class="gui-icon"><i class="md md-web"></i></div>
									<span class="title">Layouts</span>
								</a>
							</li><!--end /menu-li -->
							<!-- END DASHBOARD -->

							<!-- BEGIN UI -->
							<li class="gui-folder">
								<a>
									<div class="gui-icon"><i class="fa fa-puzzle-piece fa-fw"></i></div>
									<span class="title">UI elements</span>
								</a>
								<!--start submenu -->
								<ul>
									<li><a href="../../html/ui/colors.html" ><span class="title">Colors</span></a></li>
									<li><a href="../../html/ui/typography.html" ><span class="title">Typography</span></a></li>
									<li><a href="../../html/ui/cards.html" ><span class="title">Cards</span></a></li>
									<li><a href="../../html/ui/buttons.html" ><span class="title">Buttons</span></a></li>
									<li><a href="../../html/ui/lists.html" ><span class="title">Lists</span></a></li>
									<li><a href="../../html/ui/tabs.html" class="active"><span class="title">Tabs</span></a></li>
									<li><a href="../../html/ui/accordions.html" ><span class="title">Accordions</span></a></li>
									<li><a href="../../html/ui/messages.html" ><span class="title">Messages</span></a></li>
									<li><a href="../../html/ui/offcanvas.html" ><span class="title">Off-canvas</span></a></li>
									<li><a href="../../html/ui/grid.html" ><span class="title">Grid</span></a></li>
									<li class="gui-folder">
										<a href="javascript:void(0);">
											<span class="title">Icons</span>
										</a>
										<!--start submenu -->
										<ul>
											<li><a href="../../html/ui/icons/materialicons.html" ><span class="title">Material Design Icons</span></a></li>
											<li><a href="../../html/ui/icons/fontawesome.html" ><span class="title">Font Awesome</span></a></li>
											<li><a href="../../html/ui/icons/glyphicons.html" ><span class="title">Glyphicons</span></a></li>
											<li><a href="../../html/ui/icons/skycons.html" ><span class="title">Skycons</span></a></li>
										</ul><!--end /submenu -->
									</li><!--end /menu-li -->
								</ul><!--end /submenu -->
							</li><!--end /menu-li -->
							<!-- END UI -->

							<!-- BEGIN TABLES -->
							<li class="gui-folder">
								<a>
									<div class="gui-icon"><i class="fa fa-table"></i></div>
									<span class="title">Tables</span>
								</a>
								<!--start submenu -->
								<ul>
									<li><a href="../../html/tables/static.html" ><span class="title">Static Tables</span></a></li>
									<li><a href="../../html/tables/dynamic.html" ><span class="title">Dynamic Tables</span></a></li>
									<li><a href="../../html/tables/responsive.html" ><span class="title">Responsive Table</span></a></li>
								</ul><!--end /submenu -->
							</li><!--end /menu-li -->
							<!-- END TABLES -->

							<!-- BEGIN FORMS -->
							<li class="gui-folder">
								<a>
									<div class="gui-icon"><span class="glyphicon glyphicon-list-alt"></span></div>
									<span class="title">Forms</span>
								</a>
								<!--start submenu -->
								<ul>
									<li><a href="../../html/forms/basic.html" ><span class="title">Form basic</span></a></li>
									<li><a href="../../html/forms/advanced.html" ><span class="title">Form advanced</span></a></li>
									<li><a href="../../html/forms/layouts.html" ><span class="title">Form layouts</span></a></li>
									<li><a href="../../html/forms/editors.html" ><span class="title">Editors</span></a></li>
									<li><a href="../../html/forms/validation.html" ><span class="title">Form validation</span></a></li>
									<li><a href="../../html/forms/wizard.html" ><span class="title">Form wizard</span></a></li>
								</ul><!--end /submenu -->
							</li><!--end /menu-li -->
							<!-- END FORMS -->

							<!-- BEGIN PAGES -->
							<li class="gui-folder">
								<a>
									<div class="gui-icon"><i class="md md-computer"></i></div>
									<span class="title">Pages</span>
								</a>
								<!--start submenu -->
								<ul>
									<li class="gui-folder">
										<a href="javascript:void(0);">
											<span class="title">Contacts</span>
										</a>
										<!--start submenu -->
										<ul>
											<li><a href="../../html/pages/contacts/search.html" ><span class="title">Search</span></a></li>
											<li><a href="../../html/pages/contacts/details.html" ><span class="title">Contact card</span></a></li>
											<li><a href="../../html/pages/contacts/add.html" ><span class="title">Insert contact</span></a></li>
										</ul><!--end /submenu -->
									</li><!--end /menu-li -->
									<li class="gui-folder">
										<a href="javascript:void(0);">
											<span class="title">Search</span>
										</a>
										<!--start submenu -->
										<ul>
											<li><a href="../../html/pages/search/results-text.html" ><span class="title">Results - Text</span></a></li>
											<li><a href="../../html/pages/search/results-text-image.html" ><span class="title">Results - Text and Image</span></a></li>
										</ul><!--end /submenu -->
									</li><!--end /menu-li -->
									<li class="gui-folder">
										<a href="javascript:void(0);">
											<span class="title">Blog</span>
										</a>
										<!--start submenu -->
										<ul>
											<li><a href="../../html/pages/blog/masonry.html" ><span class="title">Blog masonry</span></a></li>
											<li><a href="../../html/pages/blog/list.html" ><span class="title">Blog list</span></a></li>
											<li><a href="../../html/pages/blog/post.html" ><span class="title">Blog post</span></a></li>
										</ul><!--end /submenu -->
									</li><!--end /menu-li -->
									<li class="gui-folder">
										<a href="javascript:void(0);">
											<span class="title">Error pages</span>
										</a>
										<!--start submenu -->
										<ul>
											<li><a href="../../html/pages/404.html" ><span class="title">404 page</span></a></li>
											<li><a href="../../html/pages/500.html" ><span class="title">500 page</span></a></li>
										</ul><!--end /submenu -->
									</li><!--end /menu-li -->
									<li><a href="../../html/pages/profile.html" ><span class="title">User profile<span class="badge style-accent">42</span></span></a></li>
									<li><a href="../../html/pages/invoice.html" ><span class="title">Invoice</span></a></li>
									<li><a href="../../html/pages/calendar.html" ><span class="title">Calendar</span></a></li>
									<li><a href="../../html/pages/pricing.html" ><span class="title">Pricing</span></a></li>
									<li><a href="../../html/pages/timeline.html" ><span class="title">Timeline</span></a></li>
									<li><a href="../../html/pages/maps.html" ><span class="title">Maps</span></a></li>
									<li><a href="../../html/pages/locked.html" ><span class="title">Lock screen</span></a></li>
									<li><a href="../../html/pages/login.html" ><span class="title">Login</span></a></li>
									<li><a href="../../html/pages/blank.html" ><span class="title">Blank page</span></a></li>
								</ul><!--end /submenu -->
							</li><!--end /menu-li -->
							<!-- END FORMS -->

							<!-- BEGIN CHARTS -->
							<li>
								<a href="../../html/charts/charts.html" >
									<div class="gui-icon"><i class="md md-assessment"></i></div>
									<span class="title">Charts</span>
								</a>
							</li><!--end /menu-li -->
							<!-- END CHARTS -->

							<!-- BEGIN LEVELS -->
							<li class="gui-folder">
								<a>
									<div class="gui-icon"><i class="fa fa-folder-open fa-fw"></i></div>
									<span class="title">Menu levels demo</span>
								</a>
								<!--start submenu -->
								<ul>
									<li><a href="#"><span class="title">Item 1</span></a></li>
									<li><a href="#"><span class="title">Item 1</span></a></li>
									<li class="gui-folder">
										<a href="javascript:void(0);">
											<span class="title">Open level 2</span>
										</a>
										<!--start submenu -->
										<ul>
											<li><a href="#"><span class="title">Item 2</span></a></li>
											<li class="gui-folder">
												<a href="javascript:void(0);">
													<span class="title">Open level 3</span>
												</a>
												<!--start submenu -->
												<ul>
													<li><a href="#"><span class="title">Item 3</span></a></li>
													<li><a href="#"><span class="title">Item 3</span></a></li>
													<li class="gui-folder">
														<a href="javascript:void(0);">
															<span class="title">Open level 4</span>
														</a>
														<!--start submenu -->
														<ul>
															<li><a href="#"><span class="title">Item 4</span></a></li>
															<li class="gui-folder">
																<a href="javascript:void(0);">
																	<span class="title">Open level 5</span>
																</a>
																<!--start submenu -->
																<ul>
																	<li><a href="#"><span class="title">Item 5</span></a></li>
																	<li><a href="#"><span class="title">Item 5</span></a></li>
																</ul><!--end /submenu -->
															</li><!--end /submenu-li -->
														</ul><!--end /submenu -->
													</li><!--end /submenu-li -->
												</ul><!--end /submenu -->
											</li><!--end /submenu-li -->
										</ul><!--end /submenu -->
									</li><!--end /submenu-li -->
								</ul><!--end /submenu -->
							</li><!--end /menu-li -->
							<!-- END LEVELS -->

						</ul><!--end .main-menu -->
						<!-- END MAIN MENU -->

						<div class="menubar-foot-panel">
							<small class="no-linebreak hidden-folded">
								<span class="opacity-75">Copyright &copy; 2014</span> <strong>CodeCovers</strong>
							</small>
						</div>
					</div><!--end .menubar-scroll-panel-->
				</div><!--end #menubar-->
				<!-- END MENUBAR -->

				<!-- BEGIN OFFCANVAS RIGHT -->
				<div class="offcanvas">

					<!-- BEGIN OFFCANVAS SEARCH -->
					<div id="offcanvas-search" class="offcanvas-pane width-8">
						<div class="offcanvas-head">
							<header class="text-primary">Search</header>
							<div class="offcanvas-tools">
								<a class="btn btn-icon-toggle btn-default-light pull-right" data-dismiss="offcanvas">
									<i class="md md-close"></i>
								</a>
							</div>
						</div>
						<div class="offcanvas-body no-padding">
							<ul class="list ">
								<li class="tile divider-full-bleed">
									<div class="tile-content">
										<div class="tile-text"><strong>A</strong></div>
									</div>
								</li>
								<li class="tile">
									<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
										<div class="tile-icon">
											<img src="../../assets/img/avatar4.jpg?1404026791" alt="" />
										</div>
										<div class="tile-text">
											Alex Nelson
											<small>123-123-3210</small>
										</div>
									</a>
								</li>
								<li class="tile">
									<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
										<div class="tile-icon">
											<img src="../../assets/img/avatar9.jpg?1404026744" alt="" />
										</div>
										<div class="tile-text">
											Ann Laurens
											<small>123-123-3210</small>
										</div>
									</a>
								</li>
								<li class="tile divider-full-bleed">
									<div class="tile-content">
										<div class="tile-text"><strong>J</strong></div>
									</div>
								</li>
								<li class="tile">
									<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
										<div class="tile-icon">
											<img src="../../assets/img/avatar2.jpg?1404026449" alt="" />
										</div>
										<div class="tile-text">
											Jessica Cruise
											<small>123-123-3210</small>
										</div>
									</a>
								</li>
								<li class="tile">
									<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
										<div class="tile-icon">
											<img src="../../assets/img/avatar8.jpg?1404026729" alt="" />
										</div>
										<div class="tile-text">
											Jim Peters
											<small>123-123-3210</small>
										</div>
									</a>
								</li>
								<li class="tile divider-full-bleed">
									<div class="tile-content">
										<div class="tile-text"><strong>M</strong></div>
									</div>
								</li>
								<li class="tile">
									<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
										<div class="tile-icon">
											<img src="../../assets/img/avatar5.jpg?1404026513" alt="" />
										</div>
										<div class="tile-text">
											Mabel Logan
											<small>123-123-3210</small>
										</div>
									</a>
								</li>
								<li class="tile">
									<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
										<div class="tile-icon">
											<img src="../../assets/img/avatar11.jpg?1404026774" alt="" />
										</div>
										<div class="tile-text">
											Mary Peterson
											<small>123-123-3210</small>
										</div>
									</a>
								</li>
								<li class="tile">
									<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
										<div class="tile-icon">
											<img src="../../assets/img/avatar3.jpg?1404026799" alt="" />
										</div>
										<div class="tile-text">
											Mike Alba
											<small>123-123-3210</small>
										</div>
									</a>
								</li>
								<li class="tile divider-full-bleed">
									<div class="tile-content">
										<div class="tile-text"><strong>N</strong></div>
									</div>
								</li>
								<li class="tile">
									<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
										<div class="tile-icon">
											<img src="../../assets/img/avatar6.jpg?1404026572" alt="" />
										</div>
										<div class="tile-text">
											Nathan Peterson
											<small>123-123-3210</small>
										</div>
									</a>
								</li>
								<li class="tile divider-full-bleed">
									<div class="tile-content">
										<div class="tile-text"><strong>P</strong></div>
									</div>
								</li>
								<li class="tile">
									<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
										<div class="tile-icon">
											<img src="../../assets/img/avatar7.jpg?1404026721" alt="" />
										</div>
										<div class="tile-text">
											Philip Ericsson
											<small>123-123-3210</small>
										</div>
									</a>
								</li>
								<li class="tile divider-full-bleed">
									<div class="tile-content">
										<div class="tile-text"><strong>S</strong></div>
									</div>
								</li>
								<li class="tile">
									<a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
										<div class="tile-icon">
											<img src="../../assets/img/avatar10.jpg?1404026762" alt="" />
										</div>
										<div class="tile-text">
											Samuel Parsons
											<small>123-123-3210</small>
										</div>
									</a>
								</li>
							</ul>
						</div><!--end .offcanvas-body -->
					</div><!--end .offcanvas-pane -->
					<!-- END OFFCANVAS SEARCH -->

					<!-- BEGIN OFFCANVAS CHAT -->
					<div id="offcanvas-chat" class="offcanvas-pane style-default-light width-12">
						<div class="offcanvas-head style-default-bright">
							<header class="text-primary">Chat with Ann Laurens</header>
							<div class="offcanvas-tools">
								<a class="btn btn-icon-toggle btn-default-light pull-right" data-dismiss="offcanvas">
									<i class="md md-close"></i>
								</a>
								<a class="btn btn-icon-toggle btn-default-light pull-right" href="#offcanvas-search" data-toggle="offcanvas" data-backdrop="false">
									<i class="md md-arrow-back"></i>
								</a>
							</div>
							<form class="form">
								<div class="form-group floating-label">
									<textarea name="sidebarChatMessage" id="sidebarChatMessage" class="form-control autosize" rows="1"></textarea>
									<label for="sidebarChatMessage">Leave a message</label>
								</div>
							</form>
						</div>
						<div class="offcanvas-body">
							<ul class="list-chats">
								<li>
									<div class="chat">
										<div class="chat-avatar"><img class="img-circle" src="../../assets/img/avatar1.jpg?1403934956" alt="" /></div>
										<div class="chat-body">
											Yes, it is indeed very beautiful.
											<small>10:03 pm</small>
										</div>
									</div><!--end .chat -->
								</li>
								<li class="chat-left">
									<div class="chat">
										<div class="chat-avatar"><img class="img-circle" src="../../assets/img/avatar9.jpg?1404026744" alt="" /></div>
										<div class="chat-body">
											Did you see the changes?
											<small>10:02 pm</small>
										</div>
									</div><!--end .chat -->
								</li>
								<li>
									<div class="chat">
										<div class="chat-avatar"><img class="img-circle" src="../../assets/img/avatar1.jpg?1403934956" alt="" /></div>
										<div class="chat-body">
											I just arrived at work, it was quite busy.
											<small>06:44pm</small>
										</div>
										<div class="chat-body">
											I will take look in a minute.
											<small>06:45pm</small>
										</div>
									</div><!--end .chat -->
								</li>
								<li class="chat-left">
									<div class="chat">
										<div class="chat-avatar"><img class="img-circle" src="../../assets/img/avatar9.jpg?1404026744" alt="" /></div>
										<div class="chat-body">
											The colors are much better now.
										</div>
										<div class="chat-body">
											The colors are brighter than before.
											I have already sent an example.
											This will make it look sharper.
											<small>Mon</small>
										</div>
									</div><!--end .chat -->
								</li>
								<li>
									<div class="chat">
										<div class="chat-avatar"><img class="img-circle" src="../../assets/img/avatar1.jpg?1403934956" alt="" /></div>
										<div class="chat-body">
											Are the colors of the logo already adapted?
											<small>Last week</small>
										</div>
									</div><!--end .chat -->
								</li>
							</ul>
						</div><!--end .offcanvas-body -->
					</div><!--end .offcanvas-pane -->
					<!-- END OFFCANVAS CHAT -->

				</div><!--end .offcanvas-->
				<!-- END OFFCANVAS RIGHT -->

			</div><!--end #base-->
			<!-- END BASE -->

			<!-- BEGIN JAVASCRIPT -->
			<script src="../../assets/js/libs/jquery/jquery-1.11.2.min.js"></script>
			<script src="../../assets/js/libs/jquery/jquery-migrate-1.2.1.min.js"></script>
			<script src="../../assets/js/libs/bootstrap/bootstrap.min.js"></script>
			<script src="../../assets/js/libs/spin.js/spin.min.js"></script>
			<script src="../../assets/js/libs/autosize/jquery.autosize.min.js"></script>
			<script src="../../assets/js/libs/nanoscroller/jquery.nanoscroller.min.js"></script>
			<script src="../../assets/js/core/source/App.js"></script>
			<script src="../../assets/js/core/source/AppNavigation.js"></script>
			<script src="../../assets/js/core/source/AppOffcanvas.js"></script>
			<script src="../../assets/js/core/source/AppCard.js"></script>
			<script src="../../assets/js/core/source/AppForm.js"></script>
			<script src="../../assets/js/core/source/AppNavSearch.js"></script>
			<script src="../../assets/js/core/source/AppVendor.js"></script>
			<script src="../../assets/js/core/demo/Demo.js"></script>
			<!-- END JAVASCRIPT -->

		</body>
	</html>
